﻿@using LdCms.EF.DbModels
@using LdCms.Common.Extension
@using LdCms.Common.Utility
@model IEnumerable<Ld_Community_Column>
@{
    ViewData["Title"] = "List";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<nav class="breadcrumb">
    <i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 社区分类 <span class="c-gray en">&gt;</span> 专栏管理 <span class="c-gray en">&gt;</span> 列表
    <a id="btn_refresh" class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a>
</nav>
<div class="page-container bg-eee" style="min-height:778px;">
    <div class="cl pl-20 pr-20 pt-10 pb-10 bg-fff text-1"></div>
    <div class="cl bg-1 pl-20 pt-10 pb-10 pr-20">
        <span class="l">
            <a href="javascript:;" onclick="$.mainu.deleteBatch()" class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a>
            <a href="javascript:;" onclick="$.mainu.add('新增专栏','@Url.Action("add")','','')" class="btn btn-primary radius"><i class="Hui-iconfont">&#xe600;</i> 新增</a>
        </span>
        <span class="r" style="padding-top:5px;">共有数据：<strong>@ViewBag.Count</strong> 条</span>
    </div>
    <div class="pd-20 bg-fff">
        <table class="table table-border table-bordered table-hover table-bg table-sort">
            <thead>
                <tr class="text-c">
                    <th width="25"><input type="checkbox" name="" value=""></th>
                    <th width="80">编号</th>
                    <th width="120">名称</th>
                    <th width="">描述</th>
                    <th width="80">排序</th>
                    <th width="120">加入时间</th>
                    <th width="70">状态</th>
                    <th width="140">操作</th>
                </tr>
            </thead>
            <tbody>
                @if (Model != null)
                {
                    foreach (var m in Model)
                    {
                        <tr class="text-c">
                            <td><input type="checkbox" name="id" value="@m.ColumnID"></td>
                            <td>@m.ColumnID</td>
                            <td>@m.ColumnName</td>
                            <td class="text-l">@m.Description</td>
                            <td>@m.Sort.ToInt()</td>
                            <td>@(m.CreateDate.HasValue ? m.CreateDate.Value.ToString("yyyy-MM-dd HH:mm") : "-")</td>
                            <td class="td-status">@(m.State.ToBool() ? Html.Raw("<span class='label label-success radius'>已启用</span>") : Html.Raw("<span class='label label-defaunt radius'>已停用</span>"))</td>
                            <td class="td-manage">
                                @if (m.State.ToBool())
                                {
                                    <a title="停用" href="javascript:;" class="ml-5" style="text-decoration:none" onClick="$.mainu.stop(this,'@m.ColumnID')">停用</a>
                                }
                                else
                                {
                                    <a title="启用" href="javascript:;" class="ml-5" style="text-decoration:none" onClick="$.mainu.start(this,'@m.ColumnID')">启用</a>
                                }
                                <a title="编辑" class="ml-5" style="text-decoration:none" href="javascript:;" onclick="$.mainu.add('编辑','@Url.Action("add", new { ColumnID = m.ColumnID })','','')">编辑</a>
                                <a title="删除" class="ml-5" style="text-decoration:none" href="javascript:;" onclick="$.mainu.delete(this,'@m.ColumnID')">删除</a>
                            </td>
                        </tr>
                    }
                }
            </tbody>
        </table>
        <div style="width:100%; height:35px;"></div>
    </div>
</div>
@*
    --------------
    页面底部JS脚本
    --------------
*@
@section scripts{
    <!--请在下方写此页面业务相关的脚本-->
    <script type="text/javascript" src="~/admin/lib/My97DatePicker/4.8/WdatePicker.js"></script>
    <script type="text/javascript" src="~/admin/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="~/admin/lib/laypage/1.2/laypage.js"></script>
    <script type="text/javascript" src="~/admin/static/h-ui.admin/js/H-ui.admin.common.js"></script>
    <script type="text/javascript">
        (function ($) {
            $.mainu = {
                init: function () {
                    $('.table-sort').dataTable({
                        "ordering": false,
                        "aaSorting": [[3, "asc"]],//默认第几个排序
                        "bStateSave": true,//状态保存
                        "iDisplayLength":100,
                        "aoColumnDefs": [
	                        { "orderable": false, "aTargets": [0, 6] }// 制定列不参与排序
                        ]
                    });
                },
                add: function (title, url, w, h) {
                    layer_show(title, url, w, h);
                },
                stop: function (obj, id) {
                    layer.confirm('确认要停用吗？', function (index) {
                        $.ajax({
                            type: 'POST',
                            url: '@Url.Action("UpdateState")',
                            data: { columnId: id, state: false },
                            dataType: 'json',
                            success: function (result) {
                                var state = result.state;
                                var message = result.message;
                                if (state == "success") {
                                    $(obj).parents("tr").find(".td-manage").prepend('<a title="启用" href="javascript:;" class="ml-5" style="text-decoration:none" onClick="$.mainu.start(this,\'' + id + '\')">启用</a>');
                                    $(obj).parents("tr").find(".td-status").html('<span class="label label-defaunt radius">已停用</span>');
                                    $(obj).remove();
                                    layer.msg('已停用！', { icon: 5, time: 3000 });
                                } else {
                                    layer.msg(message, { icon: 5, time: 3000 });
                                }
                            },
                            error: function (data) {
                                console.log(data.msg);
                            }
                        });
                    });
                },
                start: function (obj, id) {
                    layer.confirm('确认要启用吗？', function (index) {
                        $.ajax({
                            type: 'POST',
                            url: '@Url.Action("UpdateState")',
                            data: { columnId: id, state: true },
                            dataType: 'json',
                            success: function (result) {
                                var state = result.state;
                                var message = result.message;
                                if (state == "success") {
                                    $(obj).parents("tr").find(".td-manage").prepend('<a title="停用" href="javascript:;" class="ml-5" style="text-decoration:none" onClick="$.mainu.stop(this,\'' + id + '\')">停用</a>');
                                    $(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已启用</span>');
                                    $(obj).remove();
                                    layer.msg('已启用！', { icon: 6, time: 3000 });
                                } else {
                                    layer.msg(message, { icon: 5, time: 3000 });
                                }
                            },
                            error: function (data) {
                                console.log(data.msg);
                            }
                        });
                    });
                },
                delete: function (obj, id) {
                    layer.confirm('确认要删除吗？', function (index) {
                        $.ajax({
                            type: 'POST',
                            url: '@Url.Action("delete")',
                            data: { columnId: id },
                            dataType: 'json',
                            success: function (result) {
                                var state = result.state;
                                var message = result.message;
                                if (state == "success") {
                                    $(obj).parents("tr").remove();
                                    layer.msg('已删除!', { icon: 1, time: 3000 });
                                }else {
                                    layer.msg(message, { icon: 5, time: 3000 });
                                }
                            },
                            error: function (data) {
                                console.log(data.msg);
                            },
                        });
                    });
                },
                deleteBatch: function () {
                    layer.msg('不支持批量删除操作!', { icon: 5, time: 3000 });
                }
            };
            $(function () {
                $.mainu.init();
            });
        })(jQuery);
    </script>
}